import * as echarts from 'echarts';



/* 玫瑰图 */
const getRoseDiagram = (arr) => {
    let option = {
        legend: {
            type: 'scroll',
            top: 'bottom',
            textStyle: { color: '#67faff', fontSize: 18, },

            /* scroll 时 icon 翻页按钮 和 页数文字颜色 */
            pageTextStyle: { color: '#67faff' },
            pageIconColor: '#67faff',

            /* icon 翻页按钮 不可点击时颜色 */
            pageIconInactiveColor: 'rgba(103, 250, 255, 0.3)',
        },

        tooltip: {
            trigger: 'item',
            formatter: '{b0} ：{c0}（件）',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
            textStyle: {
                color: '#ffffff',
                fontSize: 20,
            },
        },

        series: [{
            type: 'pie',
            radius: [20, 210],
            center: ['50%', '60%'],
            roseType: 'area',       // radius 半径 | area 等比
            itemStyle: {
                borderRadius: 1,    // 圆角

                // 描边
                borderWidth: 1,
                borderColor: '#0b0b0f',

                // 阴影
                // shadowColor: 'rgba(0, 0, 0, 0.2)',
                // shadowBlur: 50,
            },

            label: { show: false },

            data: []
        }]
    };

    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        option.series[0].data.push({ value: item.num, name: item.value });
    }

    // 从大到小 排序
    option.series[0].data.sort((a, b) => { return b.value - a.value; });

    return option;
};

/* 趋势（折线）图 */
const getLine = (arr) => {
    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval: 0,
                rotate: 40,
                margin: 20,
                textStyle: { fontSize : 18, },
            },
            axisLine: {
                lineStyle: { color: '#67faff', }
            },

            data: []
        },
        yAxis: {
            type: 'value',
            name: '单位：件',
            nameTextStyle: { align: 'right', fontSize: 18, },
            splitLine: {
                // show: false,
                lineStyle: {
                    color: 'rgba(103, 250, 255, 0.2)'
                }
            },
            axisLine: {
                // show: true,
                lineStyle: {
                    color: '#67faff'
                }
            },
            textStyle: { fontSize: 18, },
            axisLabel: {
                // formatter: '{value} 件',
                textStyle: {
                    fontSize : 18
                },
            },
        },
        grid:{
            x: 100, y: 50,
            x2: 60, y2: 90,
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b0} 年 ：{c0}（件）',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
            textStyle: {
                color: '#ffffff',
                fontSize: 20,
            },
        },
        series: [{
            itemStyle: {
                normal: {
                    color: 'rgba(103, 250, 255, 0.3)',
                    lineStyle: {
                        width: 1,       // 设置线条粗细
                    }
                }
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 140, 38, 1)'
                }, {
                    offset: 0.5,
                    color: 'rgba(103, 250, 255, 0.5)'
                }, {
                    offset: 1,
                    color: 'rgba(58, 77, 233, 0.1)'
                }])
            },

            type: 'line',
            // smooth: true,   // 是否曲线

            data: [],
        }]
    };

    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        option.xAxis.data.push(item.value);
        option.series[0].data.push(item.num);
    }

    return option;
};

/* 雷达图 */
const getRadar = (arr) => {
    let option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
            padding: 30,
            textStyle: {
                color: '#ffffff',
                fontSize: 20,
            },
        },

        radar: [
            {
                indicator: [],
                center: ['19%', '22%'],     // 定位
                radius: 160,                // 雷达大小
                shape: 'circle',            // 圆形雷达
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 3,              // 线条宽度
                        color : '#67faff',      // 设置网格的颜色
                    },
                },
                name: {
                    textStyle: {
                        color: '#67faff',
                        fontSize: 26,
                    }
                },
            },

            {
                indicator: [],
                center: ['9%', '50%'],
                radius: 140,
                shape: 'circle',                // 圆形雷达
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 3,
                        color : '#fffa31',      // 设置网格的颜色
                    },
                },
                name: {
                    textStyle: {
                        color: '#fffa31',
                        fontSize: 26,
                    }
                },
            },

            {
                indicator: [],
                center: ['17%', '78%'],
                radius: 150,
                shape: 'circle',    // 圆形雷达
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 3,
                        color : '#44fadd',      // 设置网格的颜色
                    },
                },
                name: {
                    textStyle: {
                        color: '#44fadd',
                        fontSize: 26,
                    }
                },
            }
        ],

        series: []
    };

    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        let opt = getRadarOpt(i, item);

        option.series.push(opt.opt);
        option.radar[i].indicator = opt.indicator;
    }


    return option;
};

const getRadarOpt = (ind, arr) => {
    let indicator = [];
    let opt = {
        type: 'radar',
        radarIndex: ind,
        tooltip: {
            trigger: 'item'
        },
        areaStyle: {
            opacity: 0.5,  // 填充区域透明度
        },
        data: [{
            value: [],
            itemStyle: {},
        }]
    };

    let colors = [
        ['#67faff', 'rgba(103, 250, 255, 0.4)'],
        ['#41b3ff', 'rgba(255, 250, 49, 0.4)'],
        ['#7dd8c7', 'rgba(182, 58, 255, 0.4)'],
    ];

    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        opt.data[0].value.push(item.value);
        opt.data[0].itemStyle = {
            normal: {
                color: colors[ind][0],
                lineStyle: {
                    color: colors[ind][1],
                },
            },
        };

        indicator.push({ text: item.name });
    }

    return {
        opt: opt,
        indicator: indicator
    };
};




export {
    getRoseDiagram,
    getLine,
    getRadar,
}
